<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ajax 数据请求</title>
</head>
<body>
<ul id="members"></ul>
<script>
// js 异步主动请求数据 界面的动态更新
// console.log(fetch('https://api.github.com/orgs/lemoncode/members'))
// url 接口地址
// 网络请求 request 
// response 
// toJSON
// dom 
// httpRequest XML? 可以主动发起http 请求响应是（XML） JSON的对象
const xhr = new XMLHttpRequest();
console.log(xhr.readyState, '------');
// 打开一个请求
// false 同步请求 true 异步请求
xhr.open('GET', 'https://api.github.com/orgs/lemoncode/members', false);
// 真正发送出去
console.log(xhr.readyState, '|------');
xhr.send();
console.log(xhr.readyState, '|---|---');
// 事件监听
console.log('///////')
console.log(xhr.responseText);
// xhr.onreadystatechange = function() {
//   console.log(xhr.readyState, '|---|---|');
//   // 响应的状态码
//   // readyState 4 表示请求完成
//   if (xhr.status === 200 && xhr.readyState === 4) {
//     console.log(xhr.responseText);
//     const data = JSON.parse(xhr.responseText);
//     console.log(data);
//     document.getElementById('members').innerHTML = 
//       data.map(item => `<li>${item.login}</li>`).join('');
//   }
// }

</script>
</body>
</html>